<template>
  <div class="all">
    <header>
      <div v-if="count > 0" class="header_left" >
<!--        @click="back()"-->
<!--        <img src="../../assets/返回.png" alt="">-->
<!--        <span class="side" >返回</span>-->
      </div>
      <div v-else class="header_left"></div>
      <div class="header_content">
        <span>{{title}}签约服务协议书</span>
      </div>
      <div class="header_left"></div>
    </header>
    <div class="content">
    </div>
    <div class="bottom">
      <van-button v-if="count > 0" disabled="disabled" @click="noClose()" color="linear-gradient(90deg, #1DA3F2, #1DC7F2)">
        关闭 <span >({{count}})</span>
      </van-button>
      <van-button @click="block()" v-else color="linear-gradient(90deg, #1DA3F2, #1DC7F2)">
        关闭
      </van-button>
<!--      <button v-if="count > 0" style="opacity: 0.7" @click="noClose()">关闭 ({{count}})</button>-->
<!--      <button @click="block()" v-else>关闭</button>-->
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'Empower',
  data () {
    return {
      count: '',
      title: '',
      isDisabled: true,
      type: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.title = this.$utils.getUrlKey('title')
    document.title = this.title + '签约服务协议书'
    this.type = this.$route.query.type
    $('.content').css('height', $(window).height() - $('.bottom').height() - $('header').height() - 70 + 'px')
    if (this.type === '' || this.type === undefined) {
      // 倒计时
      this.startDivi()
    }
  },
  methods: {
    // 10秒后进入跳转页面
    startDivi () {
      const TIME_COUNT = 10
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
            // 跳转的页面写在此处
            // this.$router.history.go(-1)
          }
        }, 1000)
      }
    },
    // 点击倒计时关闭
    noClose () {
      Toast('请详细阅读协议内容')
    },
    // 关闭 存储参数
    block () {
      var active = JSON.stringify(1)
      window.sessionStorage['activeVal'] = active
      // 跳转的页面写在此处
      this.$router.history.go(-1)
    },
    // 返回
    back () {
      var active = JSON.stringify(0)
      window.sessionStorage['activeVal'] = active
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  header div{
    /*width: 33%;*/
    display: flex;
    align-items: center;
  }
  .header_left{
    width: 20%;
  }
  .header_content{
    width: 60%;
    justify-content: center;
  }
  header img{
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }
  .side{
    color: #1da4f2;
  }
  .content{
    width: 95%;
    /*height: 80vh;*/
    background: #FFFFFF;
    margin: 10px auto;
    border-radius: 10px;
  }
  .bottom{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
  }
  .bottom button{
    width: 92%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 22px;
    border: none;
    color: #FFFFFF;
  }
</style>
